<%@ page language="java" contentType="text/html; charset=UTF-8"
	isELIgnored="false" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib uri="/mytag" prefix="yjd"%>
<script	src="${requestScope.FPWEB.staticRootPath }/Js/Plugins/Echarts/echarts.min.js"></script>

<div class="wrap">
<div class="J_Chart_Panel">
		<div class="h_a1" style="clear: both;">
			<span class="title">基本数据－借款</span>
			<div class="yjd-tip">
				<div style="width:500px;">
			 1、本金代偿金额：在指定时间段内，借款人本金逾期平台垫付，对应的逾期本金之和</br>
	         2、本金代偿笔数：在指定的时间段内，借款人本金逾期平台垫付，对应的逾期笔数</br>
	         3、利息代偿金额：在指定时间段内，借款人利息逾期平台垫付，对应的逾期利息之和</br>
	         4、利息代偿笔数：在指定的时间段内，借款人利息逾期平台垫付，对应的逾期笔数</br>
	         5、借款用户数:在指定的时间段内，有过借款行为的用户数（对应的借款项目已处于募集状态）
				</div>
			</div>
		</div>
		<form method="post" id="sumary" autocomplete="off" action="${requestScope.FPWEB.rootPath }/borrow/getSummary${requestScope.FPWEB.urlStuff}">
			<div class="search_type cc">
				<label>起始时间：</label> <input type="input" max="${now }" name="start" min="${start }"
					class="input length_1 mr10 J_date" value="2013-12-21">
				<label>截止时间：</label> <input type="input" max="${now }" name="end" min="${start }"
					class="input length_1 mr10 J_date" value="${now }">
				<button id="search" type="button" class="btn length_1">搜索</button>
			</div>
		</form>
		<div id="cbox">
		<div id="c1" class="count cc" >
			<div class="c-box" field="register_account">
				<div class="c-box-head">本金代偿金额（元）</div>
				<div class="c-box-con">
					<span name="number" class="number">0</span>  <span>元</span>
				</div>
			</div>
			<div class="c-box" field="login_account">
				<div class="c-box-head">本金代偿笔数（笔）</div>
				<div class="c-box-con">
					<span name="number" class="number">0</span>  <span>笔</span>
				</div>
			</div>
			<div class="c-box" field="recharge_account">
				<div class="c-box-head">利息代偿金额（元）</div>
				<div class="c-box-con">
					<span name="number" class="number">0</span>  <span>元</span>
				</div>
			</div>
			<div class="c-box" field="invest_account">
				<div class="c-box-head">利息代偿笔数（笔）</div>
				<div class="c-box-con">
					<span name="number" class="number">0</span>  <span>笔</span>
				</div>
			</div>
			<div class="c-box" field="invest_account">
				<div class="c-box-head">借款用户数（人）</div>
				<div class="c-box-con">
					<span name="number" class="number">0</span>  <span>人</span>
				</div>
			</div>
	  </div>
	  </div>
	</div>
	<li>
	<%-- <%@include  file="/WEB-INF/jsp/sex/register.jsp"%>
	<%@include  file="/WEB-INF/jsp/sex/recharge.jsp"%> --%>
	<div class="J_Chart_Panel">
	<div class="h_a1" style="clear: both;">
	<span class="title">前10融资人</span>
	<div class="yjd-tip">
		<div style="width:500px;">
               在指定的时间点，借款余额（尚未还清的项目＋逾期未归还项目对应的本金之和）排名前10的用户及金额占比<br>
		</div>
	</div>
	</div>
	<div class="wrap " style="height:550px;" >
		<form id="reqform" method="post" autocomplete="off"  action="${requestScope.FPWEB.rootPath }/borrow/top10${requestScope.FPWEB.urlStuff}">
			<div class="search_type cc">
			    <label>截止时间：</label> <input name="time" type="input" max="${now }" min="${start }"
					class="input length_1 mr10 J_date" value="${now }">
			  <input type="hidden" name="field" value="register_account">
				
				<button type="button" class="btn length_1" onclick="getData()">查看</button>
			</div>
		</form>
		<div id="myc" style="height:100%;width:100%" class="c-box container"></div>
	</div>
	</div>
		<%@include  file="/WEB-INF/jsp/borrow/overdue.jsp"%>
		<%@include  file="/WEB-INF/jsp/borrow/overdue_capital.jsp"%>
		<%@include  file="/WEB-INF/jsp/borrow/overdue_interest.jsp"%>
		<%@include  file="/WEB-INF/jsp/borrow/overdue_90days.jsp"%>
		<%@include  file="/WEB-INF/jsp/borrow/expect_price.jsp"%>
	</div>
	<script>
		YJD.use('AppAdminCommon');
		YJD.use('AppBICommon');
		var form=$("#sumary");
		$("#search").click(function(){
			addCompareData();
		});
		function addCompareData() {
			var d=form.serializeArray();
			var cbox=$("#c1");
			var boxes=cbox.find(".c-box");
			boxes.each(function(index,e){
				var val=$(this).find('span[name=number]');
				val.text("Loading...");
			});
			$.ajax({
				type: "post",
				url: form.attr("action"),
				data :d,
				error:function(request){
					alert("连接失败！");
				},
				success:function(data){
					if (data.state == 1) {
						boxes.each(function(index,e){
							var val=$(this).find('span[name=number]');
							val.text(data.data.summaryVals[index]);
						});
					}
				}
			});
		}
		addCompareData() ;
		
		var myc = echarts.init(document.getElementById('myc'));
		var req =$("#reqform");
		function getData() {
			myc.showLoading({
				text: "数据加载中",
				effect: 'whirling',
				textStyle: {
					fontSize: 20
				}
			});
			$.ajax({
				type: "post",
				url: req.attr("action"),
				data: req.serializeArray(), // 你的formid
				success: function(data) {
					if (data.state == 1) {
						console.log(data.data);
						myc.clear();
						myc.setOption(
								{
									    title : {
									        text: '前10融资人',
									        x:'center',
									        subtext:'平台融资总额：'+fmoney(data.data.t_sum)+'元'
									    },
									    tooltip : {
									        trigger: 'item',
									        formatter: 
									        	 function(params, ticket, callback) {
												var res =params.seriesName+"<br/>"+params.name+": "+fmoney(params.value)+"元 ("+params.percent+"%)";
												setTimeout(function() {
													callback(ticket, res);
												}, 1)
												return 'loading';
											}
									        	
									    },
									    calculable:true,
									    legend: {
									        orient: 'vertical',
									        left: 'left',
									        x:'left',
									        y:'top',
									        data: data.data.names
									    },
									    series : [
									        {
									            name: '前十融资人占比',
									            type: 'pie',
									            radius : '60%',
									            center: ['50%', '60%'],
									            minAngle:16,
									            data:data.data.data,
									            itemStyle: {
									                emphasis: {
									                    shadowBlur: 10,
									                    shadowOffsetX: 0,
									                    shadowColor: 'rgba(0, 0, 0, 0.5)'
									                }
									            },
									            label:{
									            normal:{
									            	show:true,
									            	formatter:'{b}:  {c} 元 {d}%  '
									            }}
									        }
									    ]
									});
						myc.hideLoading();
					} else {
						alert(data.message);
					}
				}
			});
		}
		getData();
		function fmoney(s, n) {
			n = n >= 0 && n <= 20 ? n : 2;
			s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
			var l = s.split(".")[0].split("").reverse(),
				r = s.split(".")[1];
			t = "";
			for (i = 0; i < l.length; i++) {
				t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
			}
			return t.split("").reverse().join("") + (n==0?"":("."+ r));
		}
	</script>
</div>